To be able to edit code and run cells, you need to run the notebook yourself. Where would you like to run the notebook?

This notebook takes about 20 seconds to run.

In the cloud (experimental)

Binder is a free, open source service that runs scientific notebooks in the cloud! It will take a while, usually 2-7 minutes to get a session.

On your computer

(Recommended if you want to store your changes.)

  1. Copy the notebook URL:
  2. Run Pluto

    (Also see: How to install Julia and Pluto)

  3. Paste URL in the Open box

Frontmatter

If you are publishing this notebook on the web, you can set the parameters below to provide HTML metadata. This is useful for search engines and social media.

Author 1
👀 Reading hidden code
@bind ms Slider(0:.01:10; default=1)
515 ms
1000000
👀 Reading hidden code
n = 1000_000
13.5 μs
👀 Reading hidden code
4.8 ms
👀 Reading hidden code
y = randn(n) * .5
5.2 ms
scatter(x,y; marker_size=ms)
👀 Reading hidden code
Deprecated, use `AbstractPlutoDingetjes.Display.published_to_js(x)` instead of `PlutoRunner.publish_to_js(x)`.
 
Deprecated, use `AbstractPlutoDingetjes.Display.published_to_js(x)` instead of `PlutoRunner.publish_to_js(x)`.
 13.4 ms
using PlutoUI
👀 Reading hidden code
202 ms
👀 Reading hidden code
83.8 μs

Definition

👀 Reading hidden code
185 μs
using HypertextLiteral
👀 Reading hidden code
133 μs
scatter (generic function with 1 method)
scatter(x,y; kwargs...) = FastScatter(;x, y, kwargs...)
👀 Reading hidden code
1.2 ms
👀 Reading hidden code
10.1 μs
begin
Base.@kwdef struct FastScatter
x::Vector{<:Real}
y::Vector{<:Real}
color::String="#000000"
marker_size::Real=5
end

function Base.show(io::IO, m::MIME"text/html", f::FastScatter)
show(io, m, @htl("""
<div>
<canvas style="width: 100%; aspect-ratio: 1; border-radius: .6em;"></canvas>
<script>
const {default: createScatterplot} = await import('https://esm.sh/regl-scatterplot@1.2.3');
const canvas = currentScript.parentElement.querySelector("canvas")
const { width, height } = canvas.getBoundingClientRect();
const scatterplot = createScatterplot({
canvas,
width,
height,
pointSize: $(f.marker_size),
pointColor: [$(f.color)],
performanceMode: true,
});

const raw_x = $(Main.PlutoRunner.publish_to_js(convert(Vector{Float32}, f.x)))
const raw_y = $(Main.PlutoRunner.publish_to_js(convert(Vector{Float32}, f.y)))
const points = Array.prototype.map.call(raw_x, (x,i) => [x,raw_y[i]])
console.log(points.length, [...points[0]])
// const points = new Array(10000)
// .fill()
// .map(() => [-1 + Math.random() * 2, -1 + Math.random() * 2, 0]);
scatterplot.draw(points);

invalidation.then(() => {
// clear memory
points.length = 0
scatterplot.clear()
scatterplot.destroy()
})
</script>
</div>
"""))
end
end
👀 Reading hidden code
510 ms
# begin
# Base.@kwdef struct FastScatter
# x
# y
# end

# function Base.show(io::IO, m::MIME"text/html", f::FastScatter)
# show(io, m, @htl("""
# <div>
# <canvas style="width: 100%; height: 300px"></canvas>
# <script>
# const {default: createScatterplot} = await import('https://esm.sh/regl-scatterplot@1.2.3');
# const raw_x = $(Main.PlutoRunner.publish_to_js(convert(Vector{Float32}, f.x)))
# const raw_y = $(Main.PlutoRunner.publish_to_js(convert(Vector{Float32}, f.y)))
# const points = Array.prototype.map.call(raw_x, (x,i) => [x,raw_y[i],0])
# console.log(points.length)
# </script>
# </div>
# """))
# end
# end
👀 Reading hidden code
12.2 μs